<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>首页</title>
    <link rel="stylesheet" href="css/header.css">
    <link rel="stylesheet" href="css/footer.css">
    <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
    <script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
    <!-- <script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7js/bootstrap.min.js"></script> -->
    <style>
        * {
            padding: 0;
            margin: 0;
            list-style: none;
        }

        /* 轮播css */
        #box {
            background: plum;
            height: 400px;
        }

        #box .imgul li img {
            height: 450px;
            width: 1243px;

        }

        #box ul {
            overflow: hidden;
        }

        #box ul li {
            float: left;

        }

        #box .navul {
            margin-top: -30px;
            margin-left: 600px;
        }

        #box .navul li {
            width: 8px;
            height: 8px;
            border: 1px solid white;
            border-radius: 50%;
            text-align: center;
            margin-left: 10px;
        }

        #box .navul li.active {
            background: white;
        }

        #box .imgul li {
            display: none;
        }

        #box .imgul li.active {
            display: block;
        }

        /* 背景色浅灰色的大板块  */
        #banner {
            width: 1243px;
            background: #e7e7e7;
            color: #313131;
        }

        .shosedong {
            height: 550px;
            margin-top: 50px;
            /* background: yellow; */
            padding: 0 200px;
            overflow: hidden;

        }

        .shose1 {
            margin-left: 200px;
        }

        .shose1 .simg1 {
            width: 400px;
            height: 400px;
        }

        .shose1 .simg2 {
            margin-top: 20px;
            margin-left: 50px;
            width: 300px;
            height: 70px;
        }

        .shose2 {
            float: right;
            margin-top: -400px;
        }

        .shose2 img {
            width: 140px;
            height: 230px;
        }

        #bannerbig {
            width: 1243px;
            height: 1000px;
            color: white;
        }

        #bannerbig .bigimg {
            width: 800px;
            height: 1000px;
            margin-left: 220px;
            position: relative;
        }

        .b1 {
            position: absolute;
            left: 850px;
            top: 1070px;
        }

        .b2 {
            position: absolute;
            left: 880px;
            top: 1700px;
        }

        .b3 {
            position: absolute;
            left: 240px;
            top: 1410px;
        }
    </style>
</head>

<body>
    <div id="boss">
        <!-- 头部导航  -->
        <div class="navurl">
            <!-- 黑色背景图 -->
        </div>
        <div class="nav">
            <div class="navtop">
                <ul class="navleft">
                    <li class="glyphicon glyphicon-map-marker"></li>
                    <li>中国大陆地区</li>
                    <li>简体中文</li>
                    <li>客户服务</li>
                </ul>
                <ul class="navcenter">
                    <img class="m2" src="img/2.png" alt="">
                </ul>
                <ul class="navright">
                    <li class="dengluLi">登录</li>
                    <li class="glyphicon glyphicon-heart"></li>
                    <li class="glyphicon glyphicon-lock"></li>
                    <li class="goudai" id="goudai">购物袋</li>
                    <li class="mynum"></li>
                    <li class="glyphicon glyphicon-search"></li>
                </ul>
            </div>
            <div class="navxia">
                <li>全新咨讯</li>
                <li>男士</li>
                <li class="girl">女士(√)</li>
                <li>童装</li>
                <li>珠宝和腕表</li>
                <li>家饰</li>
                <li>礼品</li>
                <li>古驰故事</li>
            </div>
        </div>
        <!-- 二级导航html -->
        <div class="navtow">
            <ul>
                <li class="firstli">服饰</li>
                <a href="html/goodslist.html">
                    <li>连衣裙(√)</li>
                </a>
                <li>半裙</li>
                <li>毛衣</li>
                <li>卫衣</li>
            </ul>
            <ul>
                <li class="firstli">女鞋</li>
                <a href="html/goodslist.html?username">
                    <li>运动鞋(√)</li>
                </a>
                <li>高跟鞋</li>
                <li>时尚凉鞋</li>
                <li>古驰宠儿</li>
            </ul>
            <ul>
                <li class="firstli">配饰</li>
                <li>腰带</li>
                <li>帽子</li>
                <li>珠宝</li>
                <li>腕表</li>
            </ul>
        </div>
        <!-- 轮播  -->
        <div id='box'>
            <!-- 图片 -->
            <ul class="imgul">
                <li class="active"><img src="img/lunbo2.jpg" alt=""></li>
                <li><img src="img/lunbo1.jpg" alt=""></li>
            </ul>
            <!-- 导航 -->
            <ul class="navul">
                <li class="active"></li>
                <li></li>
            </ul>
        </div>


        <div id="banner">
            <!-- 背景色浅灰色的大板块 -->
            <!-- 运动鞋板块 -->
            <div class="shosedong">
                <div class="shose1">
                    <a href="html/goodslist.html"><img class="simg1" src="img/shosedong.gif" alt=""></a>
                    <p><img class="simg2" src="img/shose2.png" alt=""></p>
                </div>
                <div class="shose2">
                    <a href="html/goodslist.html"><img src="img/shose1.png" alt=""></a>
                </div>

            </div>
            <!-- 耳饰 衬衫  裤装 板块 -->
            <div id="bannerbig">
                <img class="bigimg" src="img/banner.jpg" alt="">
                <p class="b1">
                    耳饰
                    <img src="img/banner1.jpg" alt="">
                </p>
                <p class="b2">
                    裤装
                    <a href="html/goodslist.html"><img src="img/banner2.jpg" alt=""></a>
                </p>
                <p class="b3">
                    衬衫
                    <a href="html/goodslist.html"><img src="img/banner3.jpg" alt=""></a>
                </p>

            </div>
            <!-- 运动鞋板块 -->
            <div class="shosedong">
                <div class="shose1">
                    <a href="html/goodslist.html"><img class="simg1" src="img/bao.gif" alt=""></a>
                    <p><img class="simg2" src="img/shose2.png" alt=""></p>
                </div>
                <div class="shose2">
                    <a href="html/goodslist.html"></a> <img src="img/shose1.png" alt="">
                </div>
            </div>
        </div>

        <!-- 底  部 -->
        <div class="bgfoot">
            <div class="xinxi">
                <div class="weixin">
                    <img src="img/foot1.png" alt="">
                    <img src="img/foot2.png" alt="">
                    <img src="img/foot3.png" alt="">
                    <img src="img/2.png" alt="">
                </div>
                <ul>
                    <li><a href="">网络商城</a></li>
                    <li><a href="">店铺信息</a></li>
                    <li><a href="">生活良品研究所</a></li>
                </ul>
                <ul>
                    <li><a href="">Open MUJI</a></li>
                    <li><a href="">ATELIER MUJI</a></li>
                    <li><a href="">MUJI Diner</a></li>
                    <li><a href="">Meal MUJI</a></li>
                    <li><a href="">MUJI BOOKS</a></li>
                </ul>
                <ul>
                    <li><a href="">商品目录</a></li>
                    <li><a href="">隐私与个人信息保护政策</a></li>
                </ul>
                <ul>
                    <li><a href="">问题咨询</a></li>
                    <li><a href="">店铺合作伙伴</a></li>
                    <li><a href="">人才招聘</a></li>
                    <li><a href="">MUJI message</a></li>
                    <li><a href="">企业情报</a></li>
                </ul>
                <ul>
                    <li><a href=""><img src="img/footred.png" alt=""></a></li>
                    <li><a href=""><img src="" alt="">中国</a></li>

                </ul>
                <div class="gongshang1">
                    <span>©&nbsp;Ryohin Keikaku Co., Ltd.</span>
                    <span>© 无印良品（上海）商业有限公司 地址：上海市静安区南京西路1601号35楼3501-3508室</span>
                    <span>沪ICP备08018225号</span>
                    <span>
                        <img src="img/footgong.png" alt="">
                        沪公网安备31010602002779号
                    </span>
                    <span><img src="img/footgong.png" alt="">上海工商</span>
                </div>
            </div>
        </div>
    </div>
    <img src="html/goodscar.html" alt="">
</body>
<script src="js/jquery-1.11.3.js"></script>
<script src="js/lunbo.js"></script>
<script src="js/cargoodsnum.js"></script>
<script src="js/cookie.js"></script>
<script src="js/header.js"></script>
<script>
    //跳购物车(首页路径不同所以引用js无法跳转)
    $("#goudai").on("click", function () {
        if (userid) {
            location.href = `html/goodscar.html?userid=${userid}`
        }
    })

</script>

<html>